<template>
	<view class="container">
		<scroll-view scroll-x class="publisher-scroller">
			<view class="publisher-selector">
				<view class="publisher-item" v-for="(item, idx) in publishers" :key="idx" @click="switchPublisher(item)">{{item.name}}</view>
			</view>
		</scroll-view>

		<view class="main-body">
			<scroll-view scroll-y class="book-scroller">
				<view class="book-list">
					<view class="book-item" v-for="(book, idx) in books" :key="idx" @click="chooseBook(book)">
						<image class="book-cover" :src="book.cover|image"></image>
						<view class="book-name">{{book.name}}</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		
		
	</view>
</template>

<script>
	import publisherService from '@/api/service/PublisherService.js';
	import bookService from '@/api/service/BookService.js'
	export default {
		data() {
			return {
				publishers: [],
				books: []
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData(){
				publisherService.findList().then(res => {
					this.publishers = res.items;
					if(res.items.length > 0){
						this.publisherId = res.items[0].id;
						this.loadBook();
						
					}
				})
			},
			loadBook(){
				bookService.findList({
					publisherId: this.publisherId
				}).then(resp => {
					this.books = resp.items;
				})
			},
			switchPublisher(item){
				if(item.id != this.publisherId){
					this.publisherId = item.id;
					this.loadBook()
				}
			},
			chooseBook(book){
				uni.setStorage({
					key:"CURRENT_BOOK",
					data: book,
					success(){
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		height: 100%;
		overflow: hidden;
		display: flex;
		.main-body{
			flex:1;
			overflow: hidden;
		}
		.book-scroller{
			height: 100%;
		}
	}
	.publisher-scroller{
		box-shadow: 0rpx 8rpx 14rpx 2rpx rgba(26,64,129,0.05);
	}
	.publisher-selector{
		height: 100rpx;
		white-space: nowrap;
		
		.publisher-item{
			line-height: 100rpx;
			display: inline-block;
			margin: 0 30rpx;
			font-size: 28rpx;
		}
		
	}
	
	.book-list{
		display: flex;
		flex-wrap: wrap;
		padding: 50rpx 20rpx;
		.book-item{
			width: 33%;
			margin-bottom: 40rpx;
			
			.book-cover{
				margin: 0 auto;
				display: block;
				width: 198rpx;
				height: 278rpx;
			}
			.book-name{
				text-align: center;
				font-size: 26rpx;
				line-height: 50rpx;
				font-weight: bold;
			}
		}
	}

</style>
